<template>
  <div v-if="shopSeller" id="seller" ref="wrapper11">
    <div class="scrollBox">
      <header>
        <h3 style="font-size: 0.6rem">{{ shopSeller.name }}</h3>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          class="headerTitle"
        >
          <van-rate
            v-model="shopSeller.score"
            :size="15"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <p style="font-size: 0.3rem">月售{{ shopSeller.sellCount }}单</p>
          <van-checkbox
            v-model="checked"
            style="display: flex; align-items: center"
          >
            <template #icon="props">
              <div style="display: flex; align-items: center">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
                <span
                  style="display: inline-block; font-size: 0.3rem; height: 100%"
                  v-html="props.checked ? '收&nbsp&nbsp&nbsp藏' : '以收藏'"
                ></span>
              </div>
            </template>
          </van-checkbox>
        </div>
        <div
          class="headerInfo"
          style="display: flex; justify-content: space-between"
        >
          <div class="start">
            <p style="font-size: 0.4rem; opacity: 0.5">起送价</p>
            <p style="font-size: 0.4rem">
              <span style="font-size: 0.6rem">{{ shopSeller.minPrice }}</span>
              元
            </p>
          </div>
          <div class="price">
            <p style="font-size: 0.4rem; opacity: 0.5">商家配送</p>
            <p style="font-size: 0.4rem">
              <span style="font-size: 0.6rem">{{
                shopSeller.deliveryPrice
              }}</span>
              元
            </p>
          </div>
          <div class="time">
            <p style="font-size: 0.4rem; opacity: 0.5">平均配送时间</p>
            <p style="font-size: 0.4rem">
              <span style="font-size: 0.6rem">{{
                shopSeller.deliveryTime
              }}</span>
              分钟
            </p>
          </div>
        </div>
      </header>
      <main>
        <div class="bulletin" style="padding: 10px 0">
          <h3 style="font-size: 0.45rem">公告与活动</h3>
          <p style="font-size: 0.34rem; line-height: 0.66rem; color: red">
            {{ shopSeller.bulletin }}
          </p>
        </div>
        <div class="active">
          <p>
            <span id="iconfont_1" class="iconfont icon-hui"></span
            >{{ shopSeller.supports[0] }}
          </p>
          <p>
            <span id="iconfont_2" class="iconfont icon-zhe"></span>
            {{ shopSeller.supports[1] }}
          </p>
        </div>
        <div
          class="sellerImg"
          style="
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img
            style="width: 45%; padding: 5px 0"
            v-for="(item, index) in shopSeller.pics"
            :key="index"
            :src="`http://47.122.115.10:5000/${item.slice(27)}`"
            alt=""
          />
        </div>
        <div class="bottom">
          <h3 style="font-size: 0.45rem">
            营业时间：{{ shopSeller.date[0].slice(11) }}-{{
              shopSeller.date[1].slice(11)
            }}
          </h3>
        </div>
      </main>
    </div>
  </div>
</template>
<script>
import { fetchShopSeller } from "@/api";
import BScroll from "better-scroll";

export default {
  data() {
    return {
      shopSeller: false,
      checked: false,
      activeIcon: require("../assets/check.png"),
      inactiveIcon: require("../assets/isCheck.png"),
    };
  },
  methods: {
    async fetchShopSeller() {
      const res = await fetchShopSeller().then((res) => {
        this.shopSeller = res.data;
        setTimeout(() => {
          this.$nextTick(() => {
            this.initScroll();
          });
        }, 300);
      });
    },
    initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper11, {
          click: true, // 允许点击事件
          scrollY: true, // 允许纵向滚动
          // 其他配置项...
        });
      } else {
        this.scroll.refresh(); // 如果已经初始化过，刷新滚动区域
      }
    },
  },
  mounted() {
    this.fetchShopSeller();
  },
};
</script>
<style lang="less">
#seller {
  width: 95%;
  height: 70vh;
  overflow: hidden;
  padding: 0.3rem 0.2rem;
  .scrollBox {
    width: 100%;
    .headerTitle {
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(1, 1, 1, 0.4);
    }
    .active {
      font-size: 0.5rem;
      #iconfont_1 {
        color: black;
        margin-right: 5px;
      }
      #iconfont_2 {
        color: skyblue;
        margin-right: 5px;
      }
    }
  }
  .img-icon {
    height: 20px;
  }
}
</style>
